<template>
    <div class="main main_bg" :style="$store.state.isApp?'paddingTop:0':'paddingTop:1.2rem'">
      <gltitle :titleSize="titleSize" :is_mt="is_mt" v-if="!$store.state.isApp" ></gltitle>






      <van-tabs animated swipeable @click="handleChangeTab" :ellipsis="false" color="#2A64E4" title-active-color="#2A64E4" line-width="46">
        <van-tab v-for="(item,index) in tab_name" :title="item.name" :key="item.id">


          <div class="empty db" v-show="emptyShow" style="position: relative;padding:1rem 0">
            <div class="flex">
              <img src="../../assets/images/none.png" alt="">
              <span>{{$t('toast.no_data')}}</span>
            </div>
          </div>


          <van-pull-refresh v-model="refreshing" :success-text="$t('load.refreshed')"
                            @refresh="onRefresh(0)"
                            style="padding-top: .2rem;"
                            v-if="!emptyShow"
          >


            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="$t('load.no_more')"
              :loading-text="$t('load.loading')"
              @load="onLoad"
              :immediate-check="check"
            >
              <div class="list bg-fff">
                <ul>
                  <li class="db" v-for="(item,index) in datalist" :key="index" @click="view(item.id)">
                    <div class="flex">{{item.title}}</div><van-icon name="arrow" />
                  </li>
                </ul>
              </div>

            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>






    </div>
</template>
<script>


  export default {
  data(){
    return {
      it:0,
      if_check:false,
      titleSize:this.$t('title.help'),
      is_mt:true,
      tab_name:[],


      datalist:[],

      totalPage: "",
      pageSize: 0,
      loading: false,
      finished: false,
      refreshing: false,
      emptyShow:false,
      datalistNum:0,

      categoryId:'',
      check:true,





    }
  },

    created() {
      this.$post(this.URL.member.help, {
        type:'HELP',
      }).then((res) => {
        if (res.code == 0) {
          this.tab_name = res.data
          this.categoryId = this.tab_name[0].id

        } else {
          this.$toast(res.message);
        }
      });



    },
    mounted() {


    },
    methods: {
      preserve(){


      },
      view(id){
        this.$router.push({
          path: "/member/help_view",
          query: {
            id: id,
          }
        });
      },

      handleChangeTab(id,index){
        this.categoryId = this.tab_name[id].id
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = document.documentElement.scrollTop = 0;
        this.pageSize = 0
        this.totalPage = ""
        this.finished = false
        this.loading = true
        this.datalist = []
        this.emptyShow = false
        this.onLoad()
      },
      onLoad() {
        setTimeout(() => {
          if (this.refreshing) {
            this.datalist = []
            this.refreshing = false;
          }
          this.getinfo();
        },100)
      },
      onRefresh() {
        this.finished = false
        this.loading = true

        this.pageSize = 0
        this.totalPage = ""

        this.onLoad();
      },

      getinfo(){
        this.pageSize = this.pageSize + 1;

        if (this.pageIndex == this.totalPage) {
          this.loading = false;
          this.finished = true

          return;
        }

        this.$post(this.URL.member.article_list, {
          categoryId:this.categoryId,
        }).then((res) => {
          if(res.code == 2001){
            this.loading = true;
            this.finished = false
            this.emptyShow = true
            return
          }
          if(res.data.list.length==0){
            this.emptyShow = true
          }
          this.totalPage = res.data.page.totalPage;
          this.pageIndex = res.data.page.index;

          this.datalistNum = res.data.page.count

          let initData = res.data.list;
          this.datalist.push(...initData);
          this.loading = false;


        });
      },




    },


}

</script>


<style lang="less" scoped>
  /deep/ .van-tab {
    padding: 0 .16rem;
  }
  #app {
    .list {
      padding: 0 0.32rem;
      margin-top: 0.2rem;
      li {
        height: 1rem;
        background: rgba(255, 255, 255, 1);
        line-height: 1rem;
        border-bottom: 0.02rem solid rgba(243, 243, 243, 1);
        color: #222;
        font-size: 0.3rem;
        i {
          font-size: .3rem;
          color: #666;
        }
      }
    }
    .doc_box {
      .logo {
        padding: .6rem 0;
        img {
          height: 1.9rem;
        }
      }
      .boxshadow {
        height: 1rem;
        line-height: 1rem;
        padding: 0 .34rem;
        font-size: .3rem;
        margin-bottom: .3rem;
      }
      .cont {
        color: #666;
        line-height: 1.5;
        padding-bottom: .4rem;
      }
    }

  }
</style>
